// counter.js
const { ref, defineComponent } = Vue;
// 定义 MenuComponent
const CounterComponent = {
    name: 'CounterComponent',
    template: `
        <div  style="border: rgba(0,0,255,0.94) 3px solid; padding: 10px; margin: 10px; width: 380px">
            <h2>VUE3组件:{{course}}</h2>
            <h4 style="font-size: 20px; color: #3ffa35">当前数值:{{count}}</h4>
            <button style="background-color: lightblue; margin-right: 10px" @click="increment">增加计数</button>
            <button style=" background-color: lightcoral;" @click="decrement">减少计数</button>
        </div>
    `,
    setup() {
        const course = ref('Java EE平台应用开发'); // 定义课程名称
        const count = ref(0); // 定义计数器初始值为 0

        // 定义增加和减少计数的按钮逻辑
        const increment = () => {
            count.value++; // 增加计数
        };
        const decrement = () => {
            count.value--; // 减少计数
        };

        // 返回数据和方法，以便在模板中使用
        return { course, count, increment, decrement };
    }
};

// 提供一个注册全局组件的函数
function registerGlobalComponents(app) {
    app.component('CounterComponent', CounterComponent);
}
